<template>
  <div class="zuoti-container">
    <!-- 顶部导航栏 -->
     <BaseHeader
      :navs="navs"
      :activeNav="activeNav"
      @nav-change="activeNav = $event"
    />

    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      首页 > 题库 > 第1章 项目管理
    </div>

   

    <!-- 主体内容 -->
    <div class="main-content">
      <div class="flex flex-column" style="flex:3">
         <!-- 做题进度区块 -->
        <div class="progress-section">
          <div class="progress-title">做题进度</div>
          <div class="progress-bar-wrapper">
            <div class="progress-bar-bg">
              <div
                class="progress-bar"
                :style="{ width: ((answeredCount / totalQuestions) * 100) + '%' }"
              ></div>
            </div>
            <div class="progress-info">
            <span>已完成 {{ answeredCount }} 题/共 {{ totalQuestions }} 题</span> 
          </div>
          </div>
        </div>
        <div class="question-section">
          <div class="question-content">
            <div class="question-text">
              {{ questions[currentQuestion].text }}
            </div>
            <div class="options">
              <label
                v-for="(option, idx) in questions[currentQuestion].options"
                :key="idx"
                class="option"
                :class="{
                  correct: showAnalysis && option.value === analysis.correct,
                  wrong: showAnalysis && option.value === analysis.my && analysis.my !== analysis.correct
                }"
              >
                <input
                  type="radio"
                  :name="'question' + currentQuestion"
                  :value="option.value"
                  v-model="userAnswers[currentQuestion]"
                  :disabled="showAnalysis"
                  @change="selectOption(option.value)"
                />
                <span v-if="showAnalysis && option.value === analysis.correct" class="icon icon-correct"><i class="el-icon-circle-check"></i></span>
                <span v-else-if="showAnalysis && option.value === analysis.my && analysis.my !== analysis.correct" class="icon icon-wrong"><i class="el-icon-circle-close"></i></span>
                {{ option.label }}
              </label>
            </div>
            <div class="question-actions flex-end flex-col-center">
              <button @click="addToWrong(questions[currentQuestion],currentQuestion)"><i style="margin-right:10px;color:#409eff;font-size:20px2" :class=" questions[currentQuestion].iscuo == true?'el-icon-star-on':'el-icon-star-off'"></i>加入错题</button>
            </div>
          </div>
         </div>
          <!-- 解析区块 -->
	      <div v-if="showAnalysis" class="analysis-card">
            <div class="analysis-header flex-center">
              <div class="answer-block">
                <div class="answer-title">正确答案</div>
                <div class="answer-value correct"><i class="el-icon-circle-check"></i> {{ analysis.correct }}</div>
              </div>
              <div class="answer-block">
                <div class="answer-title">我的答案</div>
                <div class="answer-value" :class="analysis.my === analysis.correct ? 'correct' : 'wrong'">
                  <i :class="analysis.my === analysis.correct ? 'el-icon-circle-check' : 'el-icon-circle-close'"></i> {{ analysis.my || '-' }}
                </div>
              </div>
            </div>
	      </div>
	      <div class="question-section" style="margin-top: 20px">
            <div class="analysis-video" v-if="analysis.video">
              <video v-if="analysis.video.endsWith('.mp4')" :src="analysis.video" controls style="width: 320px; border-radius: 8px;" />
              <el-image v-else :src="analysis.video" style="width: 320px; border-radius: 8px;" />
            </div>
            <div class="analysis-text">
              <div class="analysis-title">参考解析：</div>
              <div class="analysis-content">{{ analysis.text }}</div>
            </div>
            <div style="text-align:right;margin-top:10px;">
             <!-- <el-button size="mini" @click="closeAnalysis">关闭解析</el-button> -->
            </div>
          </div>
    </div>
      <div class="answer-card-section">
        <div class="answer-card">
          <div class="answer-card-title">答题卡 {{ answeredCount }}/{{ totalQuestions }}</div>
          <div class="answer-list">
            <button
              v-for="n in totalQuestions"
              :key="n"
              :class="['answer-btn', userAnswers[n-1] ? 'answered' : 'unanswered', currentQuestion === n-1 ? 'current' : '']"
              @click="goToQuestion(n)"
            >
              {{ n }}
            </button>
          </div>
          <div class="answer-status">
            <span><span class="dot answered"></span>已做</span>
            <span><span class="dot unanswered"></span>未做</span>
          </div>
          <button class="save-next" @click="saveQuestion">保存进度，下次继续</button>
          <button class="submit-btn" @click="submitAnswers">我要交卷</button>
        </div>
      </div>
    </div>
    <div class="question-actions chakan flex flex-center flex-col-center">
      <button @click="prevQuestion" :disabled="currentQuestion === 0">上一题</button>
      <button @click="showAnswer">查看答案与解析</button>
      <button @click="nextQuestion" :disabled="currentQuestion === totalQuestions - 1">下一题</button>
    </div>
     <!-- 底部信息 -->
    <BaseFooter />
  </div>
</template>

<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from '@/components/baseFooter.vue';
export default {
  name: "VocationalSkills",
  components: { BaseHeader, BaseFooter },
  data() {
    return {
      selectedAnswers:[],
      showDialog:false,
      navs: ["首页", "新闻", "题库", "资料", "职业技能"],
      activeNav: "职业技能",
      currentQuestion: 0,
      questions: [
        {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'C',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
          iscuo:false
        },
        // 可继续添加更多题目
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'D',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'B',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'A',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'C',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'B',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'A',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'B',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'D',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'B',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'B',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
         {
          text: "项目经理接收到同一个进度工具项目，项目管理已经上过敏捷课程，并希望在项目中使用敏捷实践，项目经理应该怎么做？",
          options: [
            { value: 'A', label: 'A. 询问和确认敏捷是否可以应用于项目或提供管理意见' },
            { value: 'B', label: 'B. 找到可以在这种类型的项目或组织中实施的敏捷实践并推广它们' },
            { value: 'C', label: 'C. 复用已有的个体，为敏捷管理添加功能的分项' },
            { value: 'D', label: 'D. 为项目指定一名SCRUM MASTER，在用户中实施敏捷实践' },
          ],
          answer: 'A',
          analysis: '本题考查：敏捷项目管理的应用。A选项：并不能根据管理者上过敏捷课程就直接应用敏捷实践，应先评估项目和组织是否适合敏捷方法。B选项：正确，项目经理应根据实际情况推广适合的敏捷实践。C选项：复用已有个体并不能解决敏捷实施的核心问题。D选项：指定Scrum Master并不能保证敏捷实践的有效实施。',
          video: '12324.mp4', // 可填视频链接或图片链接
           iscuo:false
        },
      ],
      userAnswers: [],
      showAnalysis: false,
    }   
  },
  computed: {
    totalQuestions() {
      return this.questions.length;
    },
    answeredCount() {
      return this.userAnswers.filter(ans => ans).length;
    },
    analysis() {
      const q = this.questions[this.currentQuestion];
      return {
        correct: q.answer,
        my: this.userAnswers[this.currentQuestion],
        video: q.video,
        text: q.analysis
      };
    }
  },
  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
	  saveQuestion(){
		  this.$message && this.$message.success('保存成功');
	  },
     handleResize() {
      if (window.innerWidth > 900) {
        this.navOpen = false;
      }
    },
    selectOption(val) {
      console.log("====val",val);
      this.$set(this.userAnswers, this.currentQuestion, val);
      
    },
    prevQuestion() {
      if (this.currentQuestion > 0) {
        this.currentQuestion--;
        this.showAnalysis = false;
      }
    },
    nextQuestion() {
      if (this.currentQuestion < this.totalQuestions - 1) {
        this.currentQuestion++;
        this.showAnalysis = false;
      }
    },
    showAnswer() {
      this.showAnalysis = true;
    },
    saveAndNext() {
      // 保存并跳转下一题逻辑
    },
    submitAnswers() {
      this.$router.push('/jiaojuan')
    },
    goToQuestion(n) {
      this.currentQuestion = n - 1;
      this.showAnalysis = false;
    },
    addToWrong(option) {
      option.iscuo = true
      this.questions.splice(option,this.currentQuestion);
      this.$message && this.$message.success('已加入错题集');
    },
    closeAnalysis() {
      this.showAnalysis = false;
    }
  },
};
</script>

<style scoped>
.zuoti-container {
  min-height: 100vh;
  background: #f7f9fb;
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 0 40px;
  height: 60px;
  border-bottom: 1px solid #f0f0f0;
}
.header-left .logo {
  font-weight: bold;
  font-size: 20px;
}
.nav {
  display: flex;
  gap: 30px;
}
.nav a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
}
.header-right .user-btn {
  background: #f5f6fa;
  border: none;
  padding: 6px 18px;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
}
.breadcrumb {
  margin: 24px 100px;
  color: #888;
  font-size: 14px;
   text-align:left;
}
.progress-section {
  margin: 0px 0 20px 0px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e6eaf1;
  padding: 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.progress-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align:left;
}
.progress-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 24px;
}
.progress-bar-bg {
  width: 77%;
  height: 8px;
  background: #e6eaf1;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 16px;
}
.progress-bar {
  height: 100%;
  background: #409eff;
  border-radius: 5px;
  transition: width 0.3s;
}
.progress-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: #333;
}
.progress-info .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
}
.progress-info .dot.answered {
  background: #409eff;
}
.progress-info .dot.unanswered {
  background: #d9d9d9;
}
.main-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: 30px 100px 30px;
  gap: 30px;
  min-height:50vh;
}
.question-section {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e6eaf1;
  padding: 32px 32px 24px 32px;
}
.question-header {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 18px;
}
.progress {
  color: #409eff;
}
.question-content {
  margin-bottom: 18px;
}
.question-text {
  font-size: 16px;
  margin-bottom: 18px;
  text-align:left;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  margin-bottom: 6px;
}
.option.correct {
  color: #52c41a;
  font-weight: bold;
	margin-left: 3px;
	input{
		display: none;
	}
}
.option.wrong {
  color: #f5222d;
  font-weight: bold;
	margin-left: 3px;
	input{
		display: none;
	}
}
.icon {
  font-size: 18px;
}
.icon-correct {
  color: #52c41a;
}
.icon-wrong {
  color: #f5222d;
}
.question-actions {
  display: flex;
  gap: 18px;
  margin-top: 18px;
}
.question-actions button {
  background: #f5f6fa;
  border: none;
  padding: 8px 18px;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
}
.question-actions .add-fav {
  margin-left: auto;
  background: #fff;
  border: 1px solid #409eff;
  color: #409eff;
}
.answer-card-section {
  flex:1
}
.answer-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #e6eaf1;
  padding: 24px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.answer-card-title {
  font-size: 16px;
  margin-bottom: 12px;
}
.answer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.answer-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #333;
  font-size: 15px;
  cursor: pointer;

}
.answer-btn.answered {
  background: #409eff;
  color: #fff;
  border: 1px solid #409eff;
}
.answer-btn.unanswered {
  background: #fff;
  color: #333;
}
.answer-btn.current {
  border: 2px solid #409eff;
  box-shadow: 0 0 4px #409eff;
}
.answer-status {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
  font-size: 14px;
  margin-top:50px;
}
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
}
.dot.answered {
  background: #409eff;
}
.dot.unanswered {
  background: #d9d9d9;
}
.save-next {
  width: 100%;
  background: #fff;
  border: 1px solid #409eff;
  color: #409eff;
  margin-bottom: 10px;
  padding: 8px 0;
  border-radius: 4px;
  cursor: pointer;
}
.submit-btn {
  width: 100%;
  background: #409eff;
  color: #fff;
  border: none;
  padding: 8px 0;
  border-radius: 4px;
  cursor: pointer;
}
.flex{
  display: flex;
}
.flex-center{
justify-content: center;
} .flex-col-center{
align-items: center;
}
.flex-column{
  flex-direction:column;
}
.chakan{
  width:60%;
  margin:50px auto;
  button{
    background: #FFFFFF;
    box-shadow: 0px 2px 12px 0px #E1E3EB;
    border-radius: 12px;
    border: 1px solid #FFFFFF;
    padding:16px 26px;
    min-width:35%
  }
}
.flex-end{
justify-content: flex-end;
}
.analysis-card {
  margin-top: 24px;
  border-radius: 12px;
  background: #fff;
	box-shadow: 0px 2px 12px 0px #E1E3EB;
}
.analysis-header {
  display: flex;
  justify-content: space-around;
  margin-bottom: 18px;
}
.answer-block {
  text-align: center;
}
.answer-title {
  font-size: 14px;
  color: #888;
  margin-bottom: 4px;
}
.answer-value {
  font-size: 22px;
  font-weight: bold;
}
.answer-value.correct {
  color: #52c41a;
}
.answer-value.wrong {
  color: #f5222d;
}
.analysis-video {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.analysis-title {
  font-weight: bold;
  margin-bottom: 6px;
  text-align:left;
}
.analysis-content {
  color: #333;
  font-size: 15px;
  line-height: 1.7;
  text-align:left;
}
</style>
